<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="订单编号" prop="orderTeamSn">
          <el-input v-model="queryParams.orderTeamSn" placeholder="请输入订单编号" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="店铺" prop="supplierId">
          <el-select v-model="queryParams.supplierId" placeholder="店铺" clearable size="small" style="width: 240px">
            <el-option v-for="supplier in this.supplierList" :key="supplier.supplierId" :value="supplier.supplierId" :label="supplier.shopsName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select v-model="queryParams.paymentMethod" placeholder="支付方式" clearable size="small" style="width: 240px">
            <el-option label="现金" value="1">现金</el-option>
            <el-option label="余额" value="2">余额</el-option>
            <el-option label="网银" value="3">网银</el-option>
            <el-option label="支付宝" value="4">支付宝</el-option>
            <el-option label="微信" value="5">微信</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-select v-model="queryParams.orderStatus" placeholder="订单状态" clearable size="small" style="width: 240px">
            <el-option label="待付款" value="0">待付款</el-option>
            <el-option label="待收货" value="2">待收货</el-option>
            <el-option label="已完成" value="3">已完成</el-option>
            <el-option label="已完结" value="4">已完结</el-option>
            <el-option label="交易取消" value="5">交易取消</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
<!--        <el-col :span="1.5">-->
<!--          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['construction:orderTeam:add']">新增</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="1.5">-->
<!--          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['construction:orderTeam:remove']">删除</el-button>-->
<!--        </el-col>-->
        <el-col :span="1.5">
          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['construction:orderTeam:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="orderTeamList" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="订单ID" align="center" prop="orderTeamId" />
        <el-table-column label="订单编号" align="center" prop="orderTeamSn" :show-overflow-tooltip="true" />
        <el-table-column label="下单人姓名" align="center" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="下单人手机号" align="center" prop="customerPhone" :show-overflow-tooltip="true" />
        <el-table-column label="下单人ID" align="center" prop="teamInfoName" :show-overflow-tooltip="true" />
        <el-table-column label="施工队手机号" align="center" prop="teamInfoPhone" :show-overflow-tooltip="true" />
        <el-table-column label="店铺名称" align="center" prop="info.supplierInfo.shopsName" :show-overflow-tooltip="true" />
        <el-table-column label="地址" align="center" prop="address" :show-overflow-tooltip="true" />
        <el-table-column label="支付方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.paymentMethod == 1">现金</span>
          <span v-else-if="scope.row.paymentMethod == 2">余额</span>
          <span v-else-if="scope.row.paymentMethod == 3">网银</span>
          <span v-else-if="scope.row.paymentMethod == 4">支付宝</span>
          <span v-else-if="scope.row.paymentMethod == 5">微信</span>
        </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" prop="orderMoney" :show-overflow-tooltip="true" />
        <el-table-column label="优惠金额" align="center" prop="districtMoney" :show-overflow-tooltip="true" />
        <el-table-column label="支付金额" align="center" prop="paymentMoney" :show-overflow-tooltip="true" />
<!--        <el-table-column label="下单时间" align="center" prop="createTime" width="160">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="支付时间" align="center" prop="payTime" width="160">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.payTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="订单状态" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderStatus == 0">待付款</el-tag>
            <el-tag v-else-if="scope.row.orderStatus == 2">待收货</el-tag>
            <el-tag v-else-if="scope.row.orderStatus == 3" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row.orderStatus == 4" type="success">已完结</el-tag>
            <el-tag v-else-if="scope.row.orderStatus == 5" type="info">交易取消</el-tag>
          </template>
        </el-table-column>
<!--        <el-table-column label="订单积分" align="center" prop="orderPoint" :show-overflow-tooltip="true" />-->
<!--        <el-table-column label="订单描述" align="center" prop="orderDescribe" :show-overflow-tooltip="true" />-->
<!--        <el-table-column label="发票抬头" align="center" prop="invoiceTime" :show-overflow-tooltip="true" />-->
<!--        <el-table-column label="施工开始时间" align="center" prop="teamInfoStarTime" width="160">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.teamInfoStarTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="施工开始时间" align="center" prop="teamInfoEndTime" width="160">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.teamInfoEndTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)" v-hasPermi="['construction:orderTeam:query']">详细</el-button>
            <el-button v-if="scope.row.orderStatus == 0" size="mini" type="text" icon="el-icon-delete" @click="handleCancel(scope.row)" v-hasPermi="['construction:orderTeam:cancel']">取消订单</el-button>
            <el-button v-else-if="scope.row.orderStatus == 3" size="mini" type="text" icon="el-icon-edit" @click="handleFinish(scope.row)" v-hasPermi="['construction:orderTeam:finish']">确认完结</el-button>
<!--            <el-button v-if="scope.row.orderStatus == 4 || scope.row.orderStatus == 5" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['construction:orderTeam:remove']">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 施工队订单详细 -->
    <el-dialog title="施工队订单详细" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单序号：">{{ form.orderTeamId }}</el-form-item>
            <el-form-item label="订单编号：">{{ form.orderTeamSn }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单人姓名：">{{ form.customerName }}</el-form-item>
            <el-form-item label="下单人手机：">{{ form.customerPhone }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工人姓名：">{{ form.teamInfoName }}</el-form-item>
            <el-form-item label="施工人手机：">{{ form.teamInfoPhone }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址：">{{ form.address }}</el-form-item>
            <el-form-item label="发票抬头：">{{ form.invoiceTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付类型：">
              <div v-if="form.paymentMethod == 1">现金</div>
              <div v-else-if="form.paymentMethod == 2">余额</div>
              <div v-else-if="form.paymentMethod == 3">网银</div>
              <div v-else-if="form.paymentMethod == 4">支付宝</div>
              <div v-else-if="form.paymentMethod == 5">微信</div>
            </el-form-item>
            <el-form-item label="订单状态：">
              <div v-if="form.orderStatus == 0">未付款</div>
              <div v-else-if="form.orderStatus == 2">待收货</div>
              <div v-else-if="form.orderStatus == 3">已完成</div>
              <div v-else-if="form.orderStatus == 4">已完结</div>
              <div v-else-if="form.orderStatus == 5">交易取消</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额：">{{ form.orderMoney }}</el-form-item>
            <el-form-item label="优惠金额：">{{ form.districtMoney }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付金额：">{{ form.paymentMoney }}</el-form-item>
            <el-form-item label="订单积分：">{{ form.orderPoint }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单时间：">{{ parseTime(form.createTime) }}</el-form-item>
            <el-form-item label="支付时间：">{{ parseTime(form.payTime) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工开始时间：">{{ parseTime(form.teamInfoStarTime) }}</el-form-item>
            <el-form-item label="施工结束时间：">{{ parseTime(form.teamInfoEndTime) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订单描述：">{{ form.orderDescribe }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import {
    listOrderTeam,
    getOrderTeam,
    addOrderTeam,
    updateOrderTeam,
    deleteOrderTeam,
    cancelOrderTeam,
    finishOrderTeam,
    exportOrderTeam,
    selectSupplierList,
  } from "@/api/construction/orderTeam";

  export default {
    name: "Info",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        orderTeamList: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 店铺列表
        supplierList:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          supplierId: undefined,
          orderTeamSn: undefined,
          orderStatus: undefined
        },
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },
    created() {
      this.getList();
      this.getSupplierList();
    },
    methods: {
      /* 多选框选中数据 **/
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.orderTeamId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 查询店铺列表 */
      getSupplierList(){
        selectSupplierList().then(response => {
          this.supplierList = response.data;
        });
      },

      /* 查询类别列表 **/
      getList(){
        this.loading = true;
        listOrderTeam(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.orderTeamList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      /* 取消按钮 **/
      cancel() {
        this.open = false;
        this.reset();
      },

      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有订单数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportOrderTeam(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          })
          .catch(function () {});
      },

      // /* 表单重置 **/
      // reset() {
      //   this.form = {
      //     orderTeamId: undefined,
      //     orderTeamSn: undefined,
      //     customerName: undefined,
      //     customerPhone : undefined,
      //     teamInfoName : undefined,
      //     teamInfoPhone : undefined,
      //     address : undefined,
      //     districtMoney : undefined,
      //     paymentMoney  : undefined,
      //     orderDescribe : undefined,
      //   };
      //   this.resetForm("form");
      // },
      //
      // /* 查询 **/
      // handleAdd(){
      //   this.open = true;
      //   this.reset();
      //   getOrderTeam().then((response) => {
      //     this.open = true;
      //     this.title = "添加订单";
      //   });
      // },
      //
      // /* 修改 **/
      // handleUpdate(row){
      //   this.reset();
      //   const orderTeamId = row.orderTeamId || this.ids;
      //   getOrderTeam(orderTeamId).then((response) => {
      //     this.form = response.data;
      //     this.open = true;
      //     this.title = "修改订单";
      //   });
      // },

      /* 取消订单 **/
      handleCancel(row){
        const orderTeamId = row.orderTeamId || this.ids;
        this.$confirm(
          '是否确认取消订单编号为"' + orderTeamId + '"的订单信息?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return cancelOrderTeam(orderTeamId);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("取消成功");
          })
          .catch(function () {});
      },

      /* 确认订单已完结 **/
      handleFinish(row){
        const orderTeamId = row.orderTeamId || this.ids;
        this.$confirm(
          '是否确认订单编号为"' + orderTeamId + '"的订单信息已完结?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return finishOrderTeam(orderTeamId);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("取消成功");
          })
          .catch(function () {});
      },

      /* 删除 **/
      handleDelete(row){
        const orderTeamIds = row.orderTeamId || this.ids;
        this.$confirm(
          '是否确认删除用户编号为"' + orderTeamIds + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return deleteOrderTeam(orderTeamIds);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(function () {});
      },

      /* 详情 **/
      handleView: function(row){
        this.open = true;
        this.form = row;
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.orderTeamId != undefined) {
              updateOrderTeam(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addOrderTeam(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
